/**
 * 节点配置工具类
 */

// 端口配置常量
export const PORT_CONFIG = {
  RADIUS: 8,           // 端口半径
  STROKE_WIDTH: 2,     // 端口边框宽度
  FILL_COLOR: '#fff',  // 端口填充色
  STROKE_COLOR: '#5F95FF', // 默认端口边框色
  MAGNET: true,        // 是否启用磁吸
}

/**
 * 节点配置工具类
 */
export class NodeConfig {
  /**
   * 获取基础端口配置
   */
  static getBasePorts(color = PORT_CONFIG.STROKE_COLOR) {
    return {
      groups: {
        in: {
          position: 'left',
          attrs: {
            circle: {
              r: PORT_CONFIG.RADIUS,
              magnet: PORT_CONFIG.MAGNET,
              stroke: color,
              strokeWidth: PORT_CONFIG.STROKE_WIDTH,
              fill: PORT_CONFIG.FILL_COLOR,
            },
          },
        },
        out: {
          position: 'right',
          attrs: {
            circle: {
              r: PORT_CONFIG.RADIUS,
              magnet: PORT_CONFIG.MAGNET,
              stroke: color,
              strokeWidth: PORT_CONFIG.STROKE_WIDTH,
              fill: PORT_CONFIG.FILL_COLOR,
            },
          },
        },
      },
      items: [
        { group: 'in', id: 'in', attrs: { circle: { 'port-group': 'in' } } },
        { group: 'out', id: 'out', attrs: { circle: { 'port-group': 'out' } } },
      ],
    }
  }

  /**
   * 获取节点配置
   * @param {string} type 节点类型
   * @param {string} label 节点标签
   * @param {string} color 节点颜色
   */
  static getNodeConfig(type, label, color = '#5F95FF') {
    const baseConfig = {
      width: 100,
      height: 50,
      label: {
        position: {
          name: 'bottom',
          args: {
            y: 10,
          },
        },
        attrs: {
          text: {
            text: label,
            fill: '#262626',
            fontSize: 12,
            fontWeight: 500,
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
        },
      },
      ports: this.getBasePorts(),
    }

    const typeConfigs = {
      rect: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 8,
            ry: 8,
          },
        },
      },
      HttpV1: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 8,
            ry: 8,
          },
        },
      },
      JSV1: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 8,
            ry: 8,
          },
        },
      },
      group: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 8,
            ry: 8,
          },
        },
      },
      circle: {
        width: 80,
        height: 80,
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 40,
            ry: 40,
          },
        },
      },
      diamond: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
      },
      start: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 25,
            ry: 25,
          },
        },
      },
      process: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 8,
            ry: 8,
          },
        },
      },
      end: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            rx: 25,
            ry: 25,
          },
        },
      },
      decision: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
      },
      judge: {
        attrs: {
          body: {
            stroke: color,
            strokeWidth: 2,
            fill: this.getFillColor(color),
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
      },
    }

    return { ...baseConfig, ...typeConfigs[type] }
  }

  /**
   * 根据主色调获取填充色
   * @param {string} color 主色调
   */
  static getFillColor(color) {
    const colorMap = {
      '#5F95FF': '#EFF4FF',  // 蓝色 -> 浅蓝色
      '#52C41A': '#F6FFED',  // 绿色 -> 浅绿色
      '#FA8C16': '#FFF7E6',  // 橙色 -> 浅橙色
      '#F5222D': '#FFF1F0',  // 红色 -> 浅红色
      '#722ED1': '#F9F0FF'   // 紫色 -> 浅紫色
    }
    return colorMap[color] || '#EFF4FF'
  }

  /**
   * 获取随机颜色
   */
  static getRandomColor() {
    const colors = ['#5F95FF', '#52C41A', '#FA8C16', '#F5222D', '#722ED1']
    return colors[Math.floor(Math.random() * colors.length)]
  }

  /**
   * 获取固定颜色（按节点类型）
   */
  static getFixedColor(type) {
    const colorMap = {
      rect: '#5F95FF',      // 蓝色
      HttpV1: '#5F95FF',      // 蓝色（与矩形节点一致）
      JSV1: '#722ED1',      // 紫色（脚本节点）
      group: '#5F95FF',      // 蓝色（组节点）
      circle: '#52C41A',    // 绿色
      diamond: '#FA8C16',   // 橙色
      start: '#52C41A',     // 绿色（开始节点）
      process: '#52C41A',   // 绿色
      end: '#F5222D',       // 红色（结束节点）
      decision: '#F5222D',   // 红色
      judge: '#F5222D'   // 红色
    }
    return colorMap[type] || '#5F95FF'
  }

  /**
   * 获取节点尺寸
   * @param {string} type 节点类型
   */
  static getNodeSize(type) {
    const sizeMap = {
      rect: { width: 100, height: 50 },
      HttpV1: { width: 100, height: 50 },
      JSV1: { width: 100, height: 50 },
      group: { width: 400, height: 300 },
      circle: { width: 80, height: 80 },
      diamond: { width: 100, height: 50 },
      start: { width: 100, height: 50 },
      process: { width: 100, height: 50 },
      end: { width: 100, height: 50 },
      decision: { width: 100, height: 50 },
      judge: { width: 100, height: 50 }
    }
    return sizeMap[type] || { width: 100, height: 50 }
  }
} 